<template>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="ruleFormRef">
        <el-form-item label="操作人：" prop="username">
            <el-input v-model="formInline.username" placeholder="请输入操作人" />
        </el-form-item>
        <el-form-item label="操作描述：" prop="operation">
            <el-input v-model="formInline.operation" placeholder="请输入操作描述" />
        </el-form-item>
        <el-form-item label="操作地点：" prop="location">
            <el-input v-model="formInline.location" placeholder="请输入操作地点" />
        </el-form-item>
        <el-form-item prop="date">
            <div class="block">
                <span class="demonstration" style="color: #616266;">操作时间：</span>
                <el-date-picker v-model="formInline.date" type="daterange" range-separator="～" start-placeholder="开始日期"
                    end-placeholder="结束日期" value-format="YYYY-MM-DD" />
            </div>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="search()">搜索</el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
    </el-form>
    <div class="botton-group">
        <el-button plain @click="delect()">删除</el-button>
        <el-button plain>更多操作</el-button>
    </div>
    <el-table ref="multipleTableRef" :data="state.logData" width="100%" height="460"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="操作人">
            <template #default="scope">{{ scope.row.username }}</template>
        </el-table-column>
        <el-table-column property="operation" label="操作描述">
        </el-table-column>
        <el-table-column property="time" label="耗时" show-overflow-tooltip>
            <template #default="scope">
                <el-tag class="" :type="scope.row.time < 500 ? 'success': scope.row.time < 1000 ? 'warning':'danger'">
                    {{scope.row.time}} ms
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column property="params" label="执行方法" show-overflow-tooltip />
        <el-table-column property="id" label="方法参数" show-overflow-tooltip />
        <el-table-column property="ip" label="IP地址" show-overflow-tooltip />
        <el-table-column property="location" label="操作地点" show-overflow-tooltip />
        <el-table-column property="createTime" label="操作时间" show-overflow-tooltip />
    </el-table>
    <div class="demo-pagination-block">
        <el-pagination v-model:currentPage="currentPage4" v-model:page-size="pageSize4" :page-sizes="[10, 20, 30, 40]"
            :small="small" :disabled="disabled" :background="background" :total="state.total"
            layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
    <el-dialog v-model="dialogVisible" title="删除确认" width="30%">
        <span>你确定要删除所选日志吗？</span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="realDel()">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { FormInstance, ElTable, ElTree, ElMessage } from 'element-plus'
import { getAllLogApi, delLogApi } from '../../apis/log'
interface User {
    [x: string]: any;
    date: string
    name: string
    address: string
}
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
}
const ruleFormRef = ref<FormInstance>()
const formInline = reactive({
    username: '',
    operation: '',
    location: '',
    date: ''
})
const state = reactive({
    logData: [] as any,
    total: '',
    pageSize: 10,
    pageNum: 1,
    delId: [],
})
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

function search() {
    console.log(formInline.date);
    const a = `username=${formInline.username}&operation=${formInline.operation}&location=${formInline.location}&createTimeFrom=${formInline.date[0]}&createTimeTo=${formInline.date[1]}&`
    getAllLog(a)
}

const resetForm = (ruleForm: FormInstance | undefined) => {
    if (!ruleForm) return;
    ruleForm.resetFields();
    getAllLog()
};

function delect() {
    const data = JSON.parse(JSON.stringify(multipleSelection.value));
    console.log(data);
    const a = data.map((item: {
        [x: string]: any; userId: any
    }) => {
        return item.id
    })
    state.delId = a
    if (data != "") {
        dialogVisible.value = true
    } else {
        ElMessage.error("没有选中任何日志，无法删除")
    }
}
async function getAllLog(data?: any) {
    const res = await getAllLogApi(data)
    console.log(res);
    state.logData = res.rows
    state.total = res.total
}

async function delLog(data: any) {
    const res = await delLogApi(data)
    console.log(res);
    if (res == "") {
        ElMessage.success("你已删除该日志")
        getAllLog()
    }

}
const handleEdit = (index: number, row: any) => {
    console.log(index, row)
    // deleteOne(row.id)


}
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
    state.pageSize = val
    // console.log(state.pageSize);
    getAllLog(`pageSize=${val}`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    state.pageNum = val
    getAllLog(`pageNum=${val}`)
}

const dialogVisible = ref(false)

function realDel() {
    // delOne()
    delLog(state.delId)
    dialogVisible.value = false

}

onMounted(() => {
    getAllLog()
})
</script>

<style scoped>
.el-table {
    margin: 5px 0;
}
</style>